import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  WebView,
} from 'react-native';

import BasePage from '../common/BasePage';
import Config from '../../config';
import Constants from '../../common/Constants';
import SizeUtils from '../../common/SizeUtils';
import ToastUtils from '../../common/ToastUtils';
import {DateUtils} from '../../utils/Utils';

export default class ActivityMapPage extends BasePage {
  constructor(props) {
    super(props);

    this._webview = null;
    this._height = SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(40);
  }

  render() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height}}>
        <View style={{paddingTop:Config.paddingTop}}>
          {this._renderMap()}
        </View>
        {this._renderNavigationBar()}
      </View>
    )
  }

  _getActivityData() {
    return this.props.pageData.routeData.activityData;
  }

  _renderMap(){
    if(this._getActivityData().address &&
       this._getActivityData().address!=null){

        return (
          <View style={{width:SizeUtils.getWindowSize().width, height:this._height,
                    flexDirection:"row", alignItems:"center", justifyContent:"center", marginTop:SizeUtils.translateDesignNumToCode(20)}}>
            <WebView automaticallyAdjustContentInsets={false}
              ref={this._setWebView.bind(this) }
              style={{marginLeft: SizeUtils.translateDesignWidthToCode(40),
                width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
                height: this._height}}
              source={{uri:Config.mapUrl, method: 'GET'}}
              onLoad={this._postMessage.bind(this)}
              javaScriptEnabled={true}
              injectedJavaScript={'document.addEventListener("message", function(e) {eval(e.data);});'}
              scrollEnabled={false}
              startInLoadingState={true}/>
          </View>
        )
    }
  }

  _setWebView = (webview) => {
    this._webView = webview;
    let activityData = this._getActivityData();
    if (this._webView != null && activityData.address) {
      var addressArr = activityData.address.split("#_#");
      console.log("address:", addressArr);
      this._webView.postMessage('loadMap("'+ activityData.address+ '")');
    }
  }

  _postMessage = () => {
    let activityData = this._getActivityData();
    if (this._webView != null && activityData.address) {
      var addressArr = activityData.address.split("#_#");
      console.log("address:", addressArr);
      this._webView.postMessage('loadMap("'+ activityData.address+ '")');
    }
  }
}
